<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表组</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--
        	作者：zxy
        	时间：2019-07-27
        	描述：在使用BootStrap的时候尽量不要去自己写样式，基本上网站需要的都有了，去找即可
        	作者的忠告！！
        -->
		<div class="container">
			<!--列表组-->
			<!--不可点击的-->
			<ul class="list-group">
				<li class="list-group-item"><span class="badge">10</span>我热爱德玛西亚1</li>
				<li class="list-group-item"><span class="badge">20</span>我热爱德玛西亚2</li>
				<li class="list-group-item"><span class="badge">10</span>我热爱德玛西亚3</li>
			</ul>
			
			<!--可点击的-->
			<div class="list-group">
				<a href="#" class="list-group-item">我热爱学习1</a>
				<a href="#" class="list-group-item active">我热爱学习2</a>
				<a href="#" class="list-group-item">我热爱学习3</a>
				<a href="#" class="list-group-item disabled">我热爱学习4</a>
			</div>
			
			<!--情景类-->
			<div class="list-group">
				<a href="#" class="list-group-item list-group-item-success">我热爱学习1</a>
				<a href="#" class="list-group-item list-group-item-info">我热爱学习2</a>
				<a href="#" class="list-group-item list-group-item-danger">我热爱学习3</a>
				<a href="#" class="list-group-item list-group-item-warning">我热爱学习4</a>
			</div>
			
			<!--定制内容-->
			<div class="list-group">
				<a href="#" class="list-group-item">
					<!--标题-->
					<h4 class="list-group-item-heading">德玛西亚</h4>
					<!--文本-->
					<p class="list-group-item-text">这里是一个学习召唤师峡谷的地方</p>
				</a>
				<a href="#" class="list-group-item">
					<!--标题-->
					<h4 class="list-group-item-heading">德玛西亚</h4>
					<!--文本-->
					<p class="list-group-item-text">这里是一个学习召唤师峡谷的地方</p>
				</a>
				<a href="#" class="list-group-item">
					<!--标题-->
					<h4 class="list-group-item-heading">德玛西亚</h4>
					<!--文本-->
					<p class="list-group-item-text">这里是一个学习召唤师峡谷的地方</p>
				</a>
			</div>
		</div>
	</body>
</html>
